<template>
  <ScreenLayoutWithMenu title="流量分析监控大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="24小时流量趋势" grid-area="a">
        <ECharts :option="trafficOption" />
      </ChartCard>
      <ChartCard title="设备分布" grid-area="b">
        <ECharts :option="deviceOption" />
      </ChartCard>
      <ChartCard title="实时流量" grid-area="c">
        <div class="realtime-stats">
          <div class="realtime-item">
            <div class="realtime-label">当前在线</div>
            <div class="realtime-value">{{ onlineUsers }}</div>
          </div>
          <div class="realtime-item">
            <div class="realtime-label">今日PV</div>
            <div class="realtime-value">{{ todayPV }}</div>
          </div>
          <div class="realtime-item">
            <div class="realtime-label">今日UV</div>
            <div class="realtime-value">{{ todayUV }}</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="来源分析" grid-area="d">
        <ECharts :option="sourceOption" />
      </ChartCard>
      <ChartCard title="地域分布" grid-area="e">
        <div class="region-list">
          <div v-for="(city, index) in cities" :key="city" class="region-item">
            <span class="region-name">{{ city }}</span>
            <div class="region-bar">
              <div 
                class="region-bar-fill" 
                :style="{ width: `${60 + index * 10}%` }"
              ></div>
            </div>
            <span class="region-value">{{ Math.floor(Math.random() * 5000) + 2000 }}</span>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="页面访问TOP10" grid-area="f">
        <ECharts :option="pagesOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getLineOption, getBarOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const trafficOption = ref({})
const deviceOption = ref({})
const sourceOption = ref({})
const pagesOption = ref({})

const onlineUsers = ref(0)
const todayPV = ref(0)
const todayUV = ref(0)

const cities = ['北京', '上海', '广州', '深圳', '杭州', '成都']

onMounted(() => {
  const hours = Array.from({ length: 24 }, (_, i) => `${i}时`)
  
  trafficOption.value = getLineOption({
    categories: hours,
    series: [{
      name: '访问量',
      data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 5000) + 1000)
    }]
  })

  deviceOption.value = getBarOption({
    categories: ['PC', '手机', '平板', '其他'],
    series: [{
      name: '访问量',
      data: [4500, 3200, 800, 200]
    }]
  })

  sourceOption.value = getPieOption({
    name: '流量来源',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '搜索引擎' },
      { value: 234, name: '社交媒体' },
      { value: 135, name: '外部链接' },
      { value: 154, name: '其他' }
    ]
  })

  pagesOption.value = getBarOption({
    categories: ['首页', '产品页', '详情页', '购物车', '订单页', '用户中心', '帮助', '关于', '新闻', '活动'],
    series: [{
      name: '访问量',
      data: generateRandomData(10).data.sort((a, b) => b - a)
    }]
  })

  onlineUsers.value = Math.floor(Math.random() * 5000) + 2000
  todayPV.value = Math.floor(Math.random() * 50000) + 10000
  todayUV.value = Math.floor(Math.random() * 10000) + 5000
})
</script>
